<template>
  <div>
    <!--<viewhand :deleteids="this.needid"></viewhand>-->
    <div class="organizationOutMore">
      <el-form :inline="true" :model="overview" class="demo-form-inline">
        <div class="sitetitle">项目列表</div>
        <el-form-item class="handItem" label="项目编号:">
          <el-input class="handInput" v-model="overview.data.condition.project_id"></el-input>
        </el-form-item>
        <el-form-item class="handItem" label="项目名称:">
          <el-input class="handInput" v-model="overview.data.condition.project_name"></el-input>
        </el-form-item>
        <el-form-item class="handItem">
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item class="handItem">
          <el-button class="clear" type="primary" @click="returnOnSubmit">重置</el-button>
        </el-form-item>
        <el-form-item class="handItem" style="float: right">
          <el-button class="indieWidth" type="primary"><router-link :to="{path:'/managementSide/mProjectManagement/addProject'}"><i class="el-icon-plus"></i>新增</router-link></el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="pagination-container footerPage">
      <el-pagination
        @current-change="projectCurrentChange"
        @size-change="projectSizeChange"
        :page-sizes="[5, 10, 20, 50]"
        background layout="total, sizes, prev, pager, next"
        :total="projectTotal">
      </el-pagination>
    </div>
    <div class="organizationTable">
      <el-table :key='tableKey' :data="siteList" stripe fit highlight-current-row height="790"
                style="width: 100%;" :header-cell-style="{background:'#F7F8F9'}">
        <el-table-column
          prop="project_id"
          label="项目编号"
          sortable
          :show-overflow-tooltip="true"
          width="150">
        </el-table-column>
        <el-table-column
          prop="project_name"
          label="项目名称"
          sortable
          :show-overflow-tooltip="true"
          width="220">
        </el-table-column>
        <el-table-column
          prop="project_city"
          label="项目地点"
          sortable
          :show-overflow-tooltip="true"
          width="220">
        </el-table-column>
        <el-table-column
          prop="project_addr"
          label="详细地址"
          sortable
          :show-overflow-tooltip="true"
          min-width="220">
        </el-table-column>
        <el-table-column
          prop="clientele"
          label="客户名称"
          :show-overflow-tooltip="true"
          width="301">
        </el-table-column>
        <el-table-column
          prop="contact"
          label="联系人"
          sortable
          :show-overflow-tooltip="true"
          width="100">
        </el-table-column>
        <el-table-column
          label="操作"
          width="160">
          <template slot-scope="scope">
            <el-button @click.native.prevent="lookRow(scope.$index, scope.row)" class="tableIcon" type="text" title="查看" size="small">
              <img :src="detail" alt="查看"/>
            </el-button>
            <el-button @click.native.prevent="editRow(scope.$index, scope.row)" class="tableIcon" type="text" title="编辑" size="small">
              <img :src="redact" alt="编辑"/>
            </el-button>
            <div class="delete">
              <el-button  type="text" class="" title="删除" @click.native.prevent="open2(scope.$index, scope.row)">
                <img :src="wraningDelete" alt="删除"/>
              </el-button>
            </div>
            <orgdelete></orgdelete>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import orgdelete from '@/views/managementSide/mProjectManagement/components/delete'
  import axios from 'axios'
  import detail from '@/assets/reports/detail_normal.png'
  import redact from '@/assets/reports/redact_normal.png'
  import wraningDelete from '@/assets/reports/delete_normal.png'
  export default {
    components: {
      orgdelete
    },
    data() {
      return {
        detail,
        redact,
        wraningDelete,
        dialogVisible1: false,
        dialogVisible2: false,
        activeName: 'second',
        tableKey: 0,
        siteListQuery: {
          page: 1,
          limit: 20,
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id'
        },
        submitdata: {
          pid: '',
          name: '',
          orde_no: ''
        },
        siteList: [],
        multipleSelection: [],
        projectTotal: 0,
        ids: '1',
        listLoading: true,
        needid: [''],
        overview: {
          access_token: localStorage.getItem('access_token'),
          type: 'project_overview',
          data: {
            condition: {
              project_id: '',
              order_no: '',
              project_name: ''
            },
            page: {
              page_size: '10',
              page_number: '1'
            }
          }
        },
        delProject: {
          access_token: localStorage.getItem('access_token'),
          type: 'project_del',
          data: {
            project_id: 'PJ18091016'
          }
        }
      }
    },
    created() {
      this.queryData()
    },
    methods: {
      // 跳转查看编辑
      lookRow(index, rows) {
        var looknumber = rows.project_id
        this.$router.push({
          path: '/managementSide/mProjectManagement/lookProject',
          query: {
            id: looknumber
          }
        })
      },
      // 跳转组织编辑
      editRow(index, rows) {
        var editnumber = rows.project_id
        this.$router.push({
          path: '/managementSide/mProjectManagement/editProject',
          query: {
            id: editnumber
          }
        })
      },
      returnOnSubmit() {
        this.overview.data.condition.project_id = ''
        this.overview.data.condition.order_no = ''
        this.overview.data.condition.project_name = ''
        this.queryData()
      },
      queryData() {
        // 站点总览
        axios.post('/pm', this.overview, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.siteList = res.data.data.items
          this.projectTotal = parseInt(res.data.data.page.total)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 当前页
      projectCurrentChange(val) {
        this.overview.data.page.page_number = (val) + ''
        this.queryData()
      },
      // 每页显示多少条
      projectSizeChange(pageSize) {
        this.overview.data.page.page_size = (pageSize) + ''
        this.queryData()
      },
      // 查询
      onSubmit() {
        this.queryData()
      },
      // 单个删除
      open2(index, rows) {
        this.delProject.data.project_id = rows.project_id
        this.$confirm('确认是否删除项目？', '提示', {
          cancelButtonClass: 'userCancel',
          confirmButtonClass: 'userConfirm',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          axios.post('/pm', this.delProject, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            if (res.data.errcode === '00000') {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.queryData()
            }
          }).catch((res) => {
            this.$message.error(res.data.errmsg)
          })
        }).catch(() => {
        })
      }
    }
  }
</script>

<style scoped>
  /*顶部start*/
  .organizationOutMore{
    width: 100%;
    height: 50px;
    background-color: #ffffff;
    padding-top: 5px;
    padding-left: 20px;
    border-bottom: 1px solid #e0e0e0;
  }
  .sitetitle {
    float: left;
    color: #323842;
    font-size: 14px;
    font-weight: bold;
    margin-top: 12px;
    margin-right: 40px;
  }
  /deep/ label {
    font-weight: normal;
    color: #69727E;
  }
  /deep/ .handItem {
    margin-bottom: 5px!important;
  }
  /deep/ .indieWidth {
    padding: 6px 8px;
  }
  /deep/ .reset {
    padding: 6px 16px;
    background-color: #526D89;
    border-color: #526D89 ;
    color: #fff;
  }
  /deep/ .el-button + .el-button {
    margin-left: 5px;
  }
  /deep/ .el-button--primary {
    height: 30px;
    font-size: 14px;
    padding: 6px 16px;
    background: #0072F3;
    border-color: #0072F3;
  }
  /deep/ .clear{
    padding: 6px 16px;
    background-color: #526D89;
    border-color: #526D89 ;
    color: #fff;
    line-height: 0px;
  }
  /deep/ .export {
    background: #fff;
    border: 1px solid #0072F3;
    color: #0072F3;
  }
  /deep/ .el-icon-delete {
    height: 16px;
    line-height: 12px;
  }
  /deep/ .el-icon-delete:before {
    font-size: 16px;
    color: #fff;
  }

  /*顶部end*/
  /deep/ .organizationTable{
    width: 100%;
    min-height: 800px;
    background-color: #fff;
  }
  /deep/ .tableIcon {
    padding: 0px;
    font-size: 20px;
    font-weight: 500;
  }
  .el-popper[x-placement^="bottom"] {
    margin-top: 12px;
    width: 98px;
    color: #e0e0e0;
  }
  /deep/ .el-button--text {
    color: #0072F3;
  }
  /deep/ .el-table__header-wrapper {
    height: 40px;
  }
  /deep/ .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid #fff;
  }
  /deep/ .el-table--border th {
    padding: 0px;
  }
  /deep/ .el-table td {
    padding: 0px 0px;
    font-weight: normal;
  }
  /deep/ .el-table th {
    padding: 3px 0px;
  }
  .el-table::before {
    width: 0px;
    height: 0px;
  }
  /deep/ .el-button + .el-button {
    margin-left: 5px;
  }
  /deep/ .delete {
    display: inline;
    margin-left: 5px;
  }
  /deep/ .associatedSearch{
    width: 240px;
    float: left;
    height: 30px;
  }
  /deep/ .associatedDelete{
    float: right;
    margin-bottom: 10px;
    height: 30px;
  }
  /deep/ .associatedDelete .el-icon-delete {
    color: #ffffff;
    font-size: 15px;
  }
  /deep/ .associatedNew{
    float: right;
    margin-bottom: 10px;
    height: 30px;
  }
  /deep/ .footerPage{
    float: right;
    margin: 5px 0px;
  }
  /deep/ .el-message-box{
    width: 540px;
  }
  /deep/ .el-message-box__header{
    background-color: #E3E6EE;
    padding: 10px 15px;
  }
  /deep/ .el-message-box__title{
    font-size: 18px;
    font-weight: Bold;
    color: #323842;
  }
  /deep/ .el-message-box__status{
    right: 247px;
    top: 65px;
    font-size: 48px !important;
  }
  /deep/ .el-message-box__status.el-icon-warning{
    color: #E53D41;
  }
  /deep/ .el-message-box__content{
    height: 182px;
  }
  /deep/ .el-message-box__message p {
    margin: 0;
    font-size: 18px;
    color: #323842;
    padding-top: 96px;
    text-indent: 0px;
    text-align: center;
  }
  /deep/ .el-message-box__headerbtn{
    top: 9px;
    font-size: 18px;
  }
  /deep/ .el-message-box__btns{
    padding: 10px 15px 7px ;
    border-top: 1px solid #e8eaf1;
  }
  /deep/ .el-icon-delete{
    padding: 0;
    font-size: 20px;
    color: #d97159;
  }
  /deep/ .el-icon-delete:hover{
    color: #d97159;
  }
  /deep/ .el-icon-delete:focus{
    color: #d97159;
  }
  /deep/ .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  /deep/ .el-dialog{
    width: 750px;
    min-height: 700px;
    border-radius: 4px;
  }
  /deep/ .el-dialog__header{
    width:750px;
    height:39px;
    border-radius: 4px 4px 0 0;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    background-color: #E3E6EE;
  }
  /deep/ .el-dialog__headerbtn{
    top: 12px;
  }
  /deep/ .el-dialog__body{
    padding: 9px 20px;
  }
  /deep/ .el-dialog__footer {
    padding: 20px;
    padding-top: 10px;
    text-align: right;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  /deep/ .gutter {
    background: #F7F8F9;
  }
</style>
